<template>
    <div class="forget">
        <van-nav-bar
                :fixed="fixed"
                title="重置密码"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div :style="{marginTop:'86px'}">
            <div style="width: 48px;height: 48px;margin: 0 auto">
                <img src="../../static/login.png"
                     style="height: 48px;width: 48px"
                />
            </div>
            <h3 class="header_tit_txt">重置密码</h3>
            <h5 :style="{textAlign:'center',marginTop:'10px'}">请输入注册的邮箱地址、手机号码或帐号：</h5>
                <van-cell-group>
                    <van-field
                            v-model="username"
                            label="手机号"
                            placeholder="请输入手机号"
                    />
                    <van-field
                            v-model="password"
                            type="password"
                            label="新密码"
                            placeholder="请输入新密码"
                    />
                    <van-field
                            v-model="code"
                            center
                            clearable
                            label="验证码"
                            placeholder="请输入短信验证码"
                    >
                        <van-button slot="button" size="small" type="primary" @click="UserCode">发送验证码</van-button>
                    </van-field>
                </van-cell-group>
                <!--<li :style="{fontSize:'14px'}">用户输入手机号码时请正确选择区域前缀，如：台湾：+8869*******，香港：+8526******* </li>-->
                <div :style="{padding:'10px',marginTop:'10px'}">
                    <van-button size="large" @click="Submit">确定</van-button>
                </div>
        </div>
    </div>
</template>

<script>
    import {PasswordReset,VerificationCode} from "../api/data";
    import Vue from 'vue'
    import { Toast } from 'vant';
    Vue.use(Toast);
    export default {
        data() {
            return {
                fixed:true,
               username:'',
                password:'',
                code:''
            }
        },
        methods: {

            UserCode(){
                const  reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                if (reg.test(this.username)) {
                    VerificationCode(this.username).then(res=>{
                        console.log(res.data)
                        if (res.data.code==1) {
                            Toast('验证码发送成功！有效期30分钟！')
                            return
                        }
                       if (res.data.code==0) {
                           Toast('验证码发送过多,请明天再试!')
                           return
                       }
                    })
                }else{
                    Toast('请输入正确的手机号！')
                }
            },
            Submit() {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                if (reg.test(this.username)) {
                   if (this.password.length<6) {
                       Toast('密码不得低于6位！')
                       return
                   }
                   if (this.code.length<6){
                       Toast('验证码错误！')
                       return
                   }
                   PasswordReset(this.username,this.password,this.code).then(res=>{
                       console.log(res.data)
                       if (res.data.msg=='验证码不正确!'){
                           Toast('验证码不正确!')
                           return
                       }
                       if (res.data.code==1) {
                           Toast('重置密码成功！请用新密码登录！')
                           this.$router.push({path:`/login`})
                       }
                   })
                } else {
                   Toast('请输入正确的手机号！')
                }
            },
            onClickLeft() {
                this.$router.back()
            }
        }
    }
</script>

<style scoped>
    .err_tip span {
        vertical-align: middle;
    }

    .forget li {
        list-style: none;
        color: #C5C5C5;
        padding: 10px 2px;
    }

    .code input {
        width: 60%;
        height: 100%;
        font-size: 20px;
    }

    .code {
        display: flex;
        padding: 20px 1px;
        width: 100%;
        height: 60px;
        font-size: 20px;
    }

    .header_tit_txt {
        text-align: center;
        padding: 20px 0px;
    }

    .model {
        width: 49px;
        height: 48px;
        margin: 0 auto;
        display: block;
    }

    .forget {
        width: 100%;
        height: 750px;
    }
</style>
